package myJs.cps.myTable

import myJs.cps.{PureDatePickerCp, PureSelectCp, PureTextareaCp, Style}
import myJs.myPkg.jquery.$
import myJs.tool.Tool
import org.scalajs.dom.html.Input
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useEffect
import slinky.core.facade.React
import slinky.web.html._

import scala.collection.immutable.SeqMap
import myJs.Implicits._
import org.scalajs.dom.Event

/**
 * Created by yz on 21/1/2022
 */
@react object DateSearchLiCp {

  case class Props(startDate: String, startDateChange: String => Unit, endDate: String, endDateChange: String => Unit)

  val component = FunctionalComponent[Props] { props =>

    li(className := "myLi myInputLi dateInput",
      div(style := Style(marginBottom = 10),
        span(className := "fa fa-filter"),
        s" 日期检索"
      ),
      div(style := Style(marginBottom = 10), className := "form-group",
        div(className := "col-sm-12",
          PureDatePickerCp(placeHolder = s"起始", name = "startTime", value = props.startDate,
            onChangeF = props.startDateChange)
        )
      ),
      div(className := "form-group",
        div(className := "col-sm-12",
          PureDatePickerCp(placeHolder = s"终止", name = "endTime", value = props.endDate,
            onChangeF = props.endDateChange)
        )
      ),
    )

  }

}
